<template>
    <ve-line
            :data="chartData"
            :judge-width="true"
            width="100%"
            height="100%"

            :yAxis="yAxis"
            :settings="settings"
            :extend="chartExtend"
    ></ve-line>
</template>

<script>
    import api from '../../api'
    export default {
        data () {
            this.settings={
                xAxisType:'allhoursmon',
                metrics: ['排队数','服务数','未接入量'],
                dimension: ['时刻']
            }
            this.chartExtend = {
                legend:{
                    right:10,
                    top:10,
                    type: 'scroll',
                    textStyle:{
                        fontSize:14,
                        color:'#fff'
                    }
                },
                xAxis:{
                    type:'value',
                    min:0,
                    max:24,
                    minInterval:1,
                    splitNumber:24,
                    axisLabel:{
                        color:'#fff',
                        fontSize:14,
                        interval: 0,
                        showMinLabel:true
                    },
                    axisLine :{
                        show:true,
                        lineStyle:{
                            color:'#0090ff',
                            width:2
                        }
                    },
                    splitLine: {
                        show:false,
                        lineStyle:{
                            color:'#0090ff',
                            type:'dotted'
                        }
                    }
                },

                grid:{
                    bottom:12,

                    barWidth:10
                },
                series: {
                    barWidth: 40
                }
            }
            return {
                chartData: {
                    // columns: ['M_TIM', 'NUMS_QUEUE','NUMS_ONLINE_SERV','NUMS_NOT_ACCESS'],
                    columns: ['时刻', '排队数','服务数','未接入量'],
                    rows: [
                        /*{ '时刻': '00:00:00', '总话务量': 1393 ,'语音应答':1253,'客户接通':2855,'呼损量':2346},
                        { '时刻': '01:00:00', '总话务量': 1393 ,'语音应答':1253,'客户接通':2855,'呼损量':2346},
                        { '时刻': '02:00:00', '总话务量': 3530 ,'语音应答':1213,'客户接通':2555,'呼损量':2376},*/
                        { '时刻': 0, '排队数': 2923 ,'服务数':1023,'未接入量':2055},
                        /*{ '时刻': 3, '排队数': 2923 ,'服务数':1023,'未接入量':2055},
                        { '时刻': 4, '排队数': 2923 ,'服务数':1023,'未接入量':2055},
                        { '时刻': 5, '排队数': 2923 ,'服务数':1023,'未接入量':2055},
                        { '时刻': 6, '排队数': 2923 ,'服务数':1023,'未接入量':2055},
                        { '时刻': 7, '排队数': 2923 ,'服务数':1023,'未接入量':2055},
                        { '时刻': 8, '排队数': 2923 ,'服务数':1023,'未接入量':2055},
                        { '时刻': 9, '排队数': 2923 ,'服务数':1023,'未接入量':2055},*/
                    ],
                },
                yAxis:{
                    type: 'value',
                    name: '单位/个',
                    min: 0,
                    nameTextStyle:{
                        color:'#fff',
                        fontSize:14,
                        align:'right',
                        padding:[0,0,12,0]
                    },
                    splitLine: {
                        lineStyle:{
                            color:'#0090ff',
                            type:'dotted'
                        }
                    },
                    axisLabel:{
                        color:'#fff',
                        fontSize:14
                    },
                    axisLine:{
                        show:true,
                        lineStyle:{
                            color:'#0090ff',
                            width:2
                        }
                    }


                }
            }
        },
        created(){
            this.refresh()
        },
        methods:{
            async refresh(){

                this.chartData.rows = await api.getOnlinemon();
            }
        }
    }
</script>
